<!-- 应付管理 -->
<template>
  <div class="pagePadding">
    <Form inline class="formMarginBtm20 clearfix">
      <!-- 供应商 -->
      <FormItem>
        <span>供应商：</span>
        <Select placeholder="请选择" v-model="supplier_name" filterable clearable class="iviewIptWidth250">
          <Option v-for="(item, index) in thirdList" :value="item.name" :key="index">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem class="po-create-number marginRight0" :label-width="10">
        <span class="pageBtn finger btnSure" @click="query(true)">查询</span>
      </FormItem>
    </Form>
    <Table :productList="listColumns" :productData="listData" :pages="pages" :isLoad="isLoad" totalText="条记录" :total="total" @change-page="changePage">
      <div slot="summary" class="summary" v-if="listData && listData.length > 0">
        累计合计：<span class="color389">{{ $utils.formatMoney(total_surplus, true) }}</span>
      </div>
    </Table>
  </div>
</template>

<script>
import Table from '@/components/table'

export default {
  name: 'copeManage',
  components: {
    Table,
  },
  computed: {
    totleMoney() {
      let totle = 0
      this.listData.forEach(item => {
        totle += item.money * item.num
      })
      return totle
    },
  },
  data() {
    return {
      isLoad: false,
      total_surplus: 0,
      // 表格数据
      listData: [],
      // 表格头部标题
      listColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: 60,
        },
        {
          title: '供应商',
          key: 'name',
          align: 'center',
          minWidth: 400,
        },
        {
          title: '累计应付(元)',
          align: 'center',
          maxWidth: 370,
          render: (h, param) => {
            return h('span', this.$utils.formatMoney(param.row.should_pay, true))
          },
        },
        {
          title: '累计已付(元)',
          align: 'center',
          maxWidth: 370,
          render: (h, param) => {
            return h('span', this.$utils.formatMoney(param.row.already_pay, true))
          },
        },
        {
          title: '剩余应付',
          align: 'center',
          maxWidth: 370,
          render: (h, param) => {
            return h('span', this.$utils.formatMoney(param.row.surplus_pay, true))
          },
        },
      ],
      // 表单下拉选项
      thirdList: [],
      // 查询参数
      supplier_name: '',
      pages: {
        page: 1,
        rows: 10,
      },
      total: 1,
    }
  },
  mounted() {
    this.query()
    this.getSupplierNameList()
  },
  methods: {
    changePage(e) {
      this.pages.page = e
      this.query()
    },
    // 获取供应商下拉列表
    getSupplierNameList() {
      this.$http.get(this.$api.payableSupplierList).then(res => {
        this.thirdList = res.data
      })
    },
    // 查询
    query(foo = false) {
      let data = {
        page: this.pages.page,
        rows: this.pages.rows,
      }
      if (foo) {
        this.pages.page = 1
        data.page = 1
      }
      if (this.supplier_name) {
        data.supplier_name = String(this.supplier_name)
      }
      this.$http.get(this.$api.payable, data, true).then(res => {
        this.listData = res.data.result
        this.total_surplus = res.data.total_surplus
        this.total = res.data.total
      })
    },
  },
}
</script>

<style scoped lang="less">
.pagePadding {
  .marginLeft20 {
    width: 100px;
  }
}
</style>
